import QtQuick 2.2
import QtQuick.Controls 1.2
import QtQuick.Window 2.1

Window {
    visible: true
    width: 360
    height: 360
    color: "#343434"
    title: "Transition"
    Rectangle{
        id: page
        color: "#00000000"
        anchors.fill: parent
        Image {
            id: icon
            width: 64
            height: 64
            anchors.left: parent.left
            anchors.leftMargin: 20
            anchors.top: parent.top
            anchors.topMargin: 20
            source: "world_Icon.png"
        }

        Rectangle {
            id: topLeftRect
            width: 64
            height: 64
            color: "#00000000"
            radius: 6
            border.color: "#808080"
            anchors.left: parent.left
            anchors.leftMargin: 20
            anchors.top: parent.top
            anchors.topMargin: 20

            MouseArea {
                anchors.fill: parent
                onClicked: page.state = '';
            }
        }

        Rectangle {
                id: middleRightRect
                width: 64
                height: 64
                color: "#00000000"
                radius: 6
                anchors.right: parent.right
                anchors.rightMargin: 20
                anchors.verticalCenter: parent.verticalCenter
                MouseArea {
                    anchors.fill: parent
                    onClicked: page.state = 'State1';
                }
                border.color: "#808080"
            }

        Rectangle {
            id: bottomLeftRect
            width: 64
            height: 64
            color: "#00000000"
            radius: 6
            anchors.left: parent.left
            anchors.leftMargin: 20
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 20
            border.color: "#808080"

            MouseArea {
                anchors.fill: parent
                onClicked: page.state = "State";
            }
       }
        states: [
            State {
                name: "State1"
                PropertyChanges {
                    target: icon
                    x: middleRightRect.x
                    y: middleRightRect.y
                }
            },
            State {
                name: "State2"
                PropertyChanges {
                    target: icon
                    x: bottomLeftRect.x
                    y: bottomLeftRect.y
                }
            }
        ]
        state: "State2";
    }
}
